import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_app/model/planets.dart';
import 'package:flutter_app/planet_common.dart';
import 'package:flutter_app/styles.dart';

class DetailPage extends StatelessWidget {
  final Planet planet;

  DetailPage(this.planet);

  @override
  Widget build(BuildContext context) {
    Container _setBackground() {
      return new Container(
        child: CachedNetworkImage(
          height: 300,
          imageUrl: planet.picture,
          placeholder: (context, url) => new LinearProgressIndicator(),
          imageBuilder: (context, imgProvider) => Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imgProvider,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        /* child: new Image.network(
          planet.picture,
          fit: BoxFit.cover,
          height: 300.0,
        ), */

        constraints: new BoxConstraints.expand(height: 300.0),
      );
    }

    Container _setGradient() {
      return new Container(
        margin: new EdgeInsets.only(top: 190.0),
        height: 110.0,
        decoration: new BoxDecoration(
          gradient: new LinearGradient(
            colors: <Color>[new Color(0x00736AB7), new Color(0xFF736AB7)],
            stops: [0.0, 0.9],
            begin: const FractionalOffset(0.0, 0.0),
            end: const FractionalOffset(0.0, 1.0),
          ),
        ),
      );
    }

    Widget _setContent() {
      final _overview = "overview".toUpperCase();
      return ListView(
        padding: new EdgeInsets.fromLTRB(0, 72, 0, 32),
        children: <Widget>[
          new PlanetCommon(planet, horizontal: false),
          new Container(
            padding: new EdgeInsets.symmetric(horizontal: 32),
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text(
                  _overview,
                  style: headerTextStyle,
                ),
                new Separator(),
                new Text(
                  planet.description,
                  style: commonTextStyle,
                ),
              ],
            ),
          )
        ],
      );
    }

    Container _setToolBar(BuildContext context) {
      return Container(
        margin: new EdgeInsets.only(
          top: MediaQuery.of(context).padding.top,
        ),
        child: new BackButton(
          color: Colors.white,
        ),
      );
    }

    return Scaffold(
      body: new Container(
        constraints: new BoxConstraints.expand(),
        color: new Color(0xFF736AB7),
        child: new Stack(
          children: <Widget>[
            _setBackground(),
            _setGradient(),
            _setContent(),
            _setToolBar(context),
          ],
        ),
      ),
      /* body: new Container(
        constraints: new BoxConstraints.expand(),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(planet.name),
            new Hero(
              tag: "planet-hero-${planet.id}",
              child: new Image(
                image: new AssetImage(planet.image),
                height: 92.0,
                width: 92.0,
              ),
            ),
          ],
        ),
      ), */
      /* body: new Center(
        child: new RaisedButton(
          onPressed: () => Navigator.pop(context),
          child: new Text("go back"),
        ),
      ), */
    );
  }
}
